<template>
    <el-dialog :title="'分配角色'" :close-on-click-modal="false" :visible.sync="visible">
        <el-table :data="dataList" border ref="dataTable" v-loading="dataListLoading"
            @selection-change="selectionChangeHandle" style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50" />
            <el-table-column prop="id" header-align="center" align="center" label="id" width="80" />
            <el-table-column prop="roleName" header-align="center" align="center" label="角色名称" />
            <el-table-column prop="workbenchCode" header-align="center" align="center" label="工作台编号" />
            <el-table-column prop="createDate" header-align="center" align="center" label="创建时间" />
            <el-table-column prop="updateDate" header-align="center" align="center" label="更新时间" />
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            visible: false,
            dataList: [],
            dataListLoading: false,
            dataListSelections: null,
        }
    },
    methods: {
        init(id) {
            this.id = id || 0
            this.visible = true
            this.getRoleList();
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        // 表单提交
        dataFormSubmit() {
            this.$http({
                url: `/pms/admin/role/grantRole`,
                method: 'post',
                data: {
                    memAccountId: this.id,
                    roleIds: this.dataListSelections.map(item => (item.id))
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                } else {
                    this.$message.error(response.message)
                }
            })
        },
        getRoleList() {
            this.$http({
                url: `/pms/admin/role/listRoleWithGrantStatus`,
                method: 'post',
                data: {
                    memAccountId: this.id,
                    pageInfo: {
                        pageNum: this.pageIndex,
                        pageSize: this.pageSize
                    }
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    this.dataList = response.data;
                    // 使用this.$nextTick进行延迟回调，要不在dom渲染完成之前就调用selection的方法，就会失效。
                    this.$nextTick(() => {
                        this.dataList.forEach((item) => {
                            if (item.grantedFlag) {
                                this.$refs.dataTable.toggleRowSelection(item);
                            }
                        })
                    })
                } else {
                    this.$message.error(response.message)
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.el-select {
    width: 100%
}

.el-radio-group {
    display: flex;
    height: 40px;
    align-items: center;
}
</style>
